<template>
  <view>
    <view class="top">
     <view class="swiper" >
     			<!--轮播 -->
     			<swiper @change="SwiperTab" :current="uCurrent" :indicator-dots="false" :interval="4000" :duration="400"  class="swiper">
     				<swiper-item v-for="(item,index) in xq1" :key='index'>
     					<image :src="item"></image>
     				</swiper-item>
     			</swiper>	
     			<!-- 更改指示器样式指示器：数字胶囊 -->
     			<block class="number"  >	
     				<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ xq1.length }}</view>	
     			</block>
     		</view>
    </view>
    
    <view class="center">
      <image src="../../static/left.png" mode="" style="width: 113rpx; height: 10rpx; margin: 29rpx 190rpx;"> </image>
	  <text style="font-size: 32rpx; color: #4575FC; float: left; margin: -66rpx 290rpx;">项目名称</text>
	   <image  src="../../static/right.png" mode="" style="width: 113rpx; height: 10rpx; float: right; margin: -48rpx 200rpx;"> </image>
	   <view class="one">
	   	  <image  :src="img" mode="" style="width: 105rpx; height: 103rpx; float: left; margin: -78rpx 0rpx;"></image>
	   </view>
	 
      <view class="text" style="width: 205rpx;  ">
		 
        <text style="font-size: 20rpx; color: #fff; float: left;margin: 12rpx 2rpx;">{{text}}</text>
      </view>
	   <view class="zi">
	   	<text style=" line-height:69rpx; display: block; text-align: center; overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;">{{xq.title}}</text>
	   </view>
    </view>
    
    <view class="center1">
    	<image src="../../static/left.png" mode="" style="width: 113rpx; height: 10rpx; margin: -10rpx 190rpx;"> </image>
    	<text style="font-size: 32rpx; color: #4575FC;float: left; margin: -26rpx 290rpx;">项目描述</text>
    	 <image src="../../static/right.png" mode="" style="width: 113rpx; height: 10rpx; float: right; margin: -8rpx 200rpx;"> </image>
		 <image src="../../static/bc5.png" style="width: 246rpx; height: 209rpx; float: left; margin: 50rpx 10rpx;" mode=""></image>
		 <view class="hezi" style="width: 418rpx; height: 209rpx; float: right; margin-right: 20rpx; margin-top: 50rpx;">
		 	 <text style="font-size: 26rpx; color: #ccc; float: left;margin: 0rpx 0rpx; text-indent: 0rpx;overflow: hidden;
    -webkit-line-clamp: 6;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;">{{xq.desc}}
       <!-- 自研电法系统为核心，集成多种传感器，结合互联网及云数据存储，成功构建了在线监测系统,该系统能够实现全天候连续监测及远程操控、环境保护预警等 -->
       </text>
		 </view>
		
    </view>
    
    <view class="tu">
      <image :src="xq.image" mode="" style="width: 100%; height: 100%;"></image>
    </view>
    
    <view class="bom">
      <image src="../../static/left.png" mode="" style="width: 113rpx; height: 10rpx; margin: -10rpx 200rpx;"> </image>
      <text style="font-size: 32rpx; color: #4575FC;float: right; margin: -24rpx 290rpx;">产品描述</text>
       <image src="../../static/right.png" mode="" style="width: 113rpx; height: 10rpx; float: right; margin: -8rpx 200rpx;"> </image>
       
       <view class="bom1">
         <rich-text v-html="xq.content"></rich-text>
     <!--    <view style="width: 20rpx; height: 20rpx; border-radius: 50%; background-color: #333333;margin-top: 5rpx;"></view>
         <text style="font-size: 26rpx; float: left; margin: -28rpx 34rpx;">充分弥散细集料，混合料不离析</text>
         <text style="font-size: 26rpx; float: left; margin: 10rpx 0rpx;">通用参数优于传统水泥稳定碎石搅拌机，同时融合振动搅拌技术，将混合料中的水泥团、灰团振碎，使其均匀分布在混合料中，有效防止混合料离析。</text>
           <view style="width: 20rpx; height: 20rpx; border-radius: 50%; background-color: #333333;margin-top: 160rpx;"></view>
           <text style="font-size: 26rpx; float: left; margin: -30rpx 34rpx;">细集料对粗骨料的裹覆性好，容易压实</text>
             <text style="font-size: 26rpx; float: left; margin: 10rpx 0rpx;">振动搅拌使水泥充分水化，水泥水化物和细集料将粗骨料均匀包裹，大粒径的粗骨料表面相当于均匀涂抹了一层“润滑剂”，骨料在移动时，其间的摩阻力降低，压实功更容易向下传递。振动搅拌水稳基层大骨料分布上下均匀，芯样底部完整密实，“不断根”，基层整体耐久性显著提升。</text>
             
             <view style="width: 20rpx; height: 20rpx; border-radius: 50%; background-color: #333333;margin-top: 240rpx;"></view>
             <text style="font-size: 26rpx; float: left; margin: -30rpx 34rpx;">提高强度，降低水泥用量，减少裂缝</text>
               <text style="font-size: 26rpx; float: left; margin: 10rpx 0rpx;">混合料在振动搅拌作用下充分搅拌均匀，相同配合比下强度可提高 20% ～ 100%，科学减少水泥用量，减少半刚性基层裂缝发生。</text> -->
       </view>
    </view>
  </view>
</template>

<script>
  import {xmxq} from '@/api/api.js'
  export default {
    name:"swiperDots",
    	props:{
    		swiperList:Array,
    		mode:String
    	},
      data() {
          return {
              id:'',
              pid:'',
              xq:"",
              xq1:'',
			  img:'',
			  text:'',
              uCurrent:0,
              indicatorDots: true,
              autoplay: true,
              interval: 2000,
              duration: 500
          }
      },
      onLoad(options) {
        console.log(options);
       //分享微信好友
       if (this.$wechat && this.$wechat.isWechat()) {
		this.$wechat.share();
       }
		this.id = options.id;
		 this.x_mxq()
        // this.pid = options.pid;
        // this.id=options.id
      },
      methods: {
          changeIndicatorDots(e) {
              this.indicatorDots = !this.indicatorDots
          },
          changeAutoplay(e) {
              this.autoplay = !this.autoplay
          },
          intervalChange(e) {
              this.interval = e.target.value
          },
          durationChange(e) {
              this.duration = e.target.value
          },
          
          x_mxq:function(){
          		xmxq({id:this.id}).then(res=>{
          			console.log(res)
          			this.xq= res.data;		
                this.xq1=res.data.images;
				this.getstatus();
          	})
          },
		  
		  
		  getstatus() {
		  	if (this.xq.state == 0) {
		  		this.img='../../static/lan.png';
		  		console.log(this.img)
		  		this.text = '意向项目';
		  		return 
		  	}
		  	if (this.xq.state == 1) {
		  		this.img='../../static/zong.png';
		  		this.text = '跟踪项目';
		  		return 
		  	}
		  	if (this.xq.state == 2) {
		  		this.img='../../static/zong1.png';
		  		this.text = '成单项目';
		  		return 
		  	}
		  	if (this.xq.state == 3) {
		  		this.img='../../static/red.png';
		  		this.text = '首付项目';
		  		return 
		  	}
		  	if (this.xq.state == 4) {
		  		this.img='../../static/zi.png';
		  		this.text = '已回款项目';
		  		return 
		  	}
		  	if (this.xq.state == 5) {
		  		this.img='../../static/skyblue.png';
		  		this.text = '售后项目';
		  		return 
		  	}
		  	if (this.xq.state == 6) {
		  		this.img='../../static/lv.png';
		  		this.text = '完成项目';
		  		return
		  	}
		  }
		  
		  
      },
      
      filters: {
      	getstatus(state) {
      		if (state == 0) {
      			return '意向项目'
      		}
      		if (state == 1) {
      			return '跟踪项目'
      		}
      		if (state == 2) {
      			return '成单项目'
      		}
      		if (state == 3) {
      			return '首付项目'
      		}
      		if (state == 4) {
      			return '已回款项目'
      		}
      		if (state == 5) {
      			return '售后项目'
      		}
      		if (state == 6) {
      			return '完成项目'
      		}
      	}
      },
      
      
  }
  

</script>

<style lang="scss" scoped>
  page{
    background-color: #F3F2F2;
  }
.top{
  width: 100%;
  height: 577rpx;
  // background-color: red;
}
.center {
  width: 712rpx;
  height: 157rpx;
  margin: 40rpx auto;
  background-color: #fff;
  border-radius: 20rpx 20rpx;
}
/deep/uni-swiper{
  height: 577rpx;
}
.cp{
  width: 686rpx;
  height: 95rpx;
  margin: 30rpx auto;
  background-color: #e7eaf2;
}
.tu{
  width: 100%;
  height: 444rpx;
  margin: 30rpx 0rpx;
  // background-color: red;
}

  

.zi{
	width:599.32rpx;
	height:69.78rpx;
	background-color: #80A5FF;
	margin: 0rpx auto;
	border-radius: 100rpx 100rpx;
}
.center1{
	width: 713rpx;
	height: 312rpx;
	margin:0 auto;
	background-color: #fff;
	border-radius: 20rpx 20rpx;
}
.bom{
  width: 713rpx;
  height:763rpx;
  margin: 0rpx auto;
  background-color:#fff;
  border-radius: 10rpx 10rpx;
  .bom1{
    width: 686rpx;
    height: 673rpx;
    font-size: 26rpx;
    margin: 50rpx 16rpx;
    float: left;
    background-color: #FFF;
  }
}
.text{
  width: 105rpx;
  float: left;
  transform: rotate(-45deg);
  margin: -110rpx -24rpx;
}
.one{
	width: 105rpx;
	float: left;
	transform: rotate(-87deg);
	margin: -24rpx 32rpx;
}

.swiper {
   width: 100%;
   height: 600rpx;
   position: relative;
   image {
 	width: 100%;
 	height: 100%;
   }
   /* 指示器样式 */
   .u-indicator-item-number {
   	width: 40px;
   	padding: 10rpx;
   	line-height: 1;
   	background-color: rgba(0, 0, 0, 0.3);
   	border-radius: 100rpx;
   	font-size: 30rpx;
   	color: rgba(255, 255, 255, 0.8);
   	position: absolute;
   	right: 2%;
   	bottom: 3%;
   	text-align: center;
 	letter-spacing: 3rpx;
   }
 }
</style>
